//
//  ContentView.swift
//  SwiftUi
//
//  Created by xm on 20/08/2025.
//

import SwiftUI
import MapKit

struct CNLandmarkDetail: View {
    let landmark: CNLandmark
    
    @EnvironmentObject var userData: UserData
    

    var landmarkIndex: Int {
        userData.landmarks.firstIndex {
            $0.id == landmark .id
        }!
    }
    
    var body: some View {
        let screenWidth = UIScreen.main.bounds.width
        let screenHeight = UIScreen.main.bounds.height
        let imageWidth = screenWidth*0.65
        VStack {
            MapView(center: landmark.locationCoordinate)
                .edgesIgnoringSafeArea(.top) // 顶部伸展到状态栏
                .frame(height: screenHeight/2.2)
                
            Image(landmark.imageName)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width:imageWidth , height: imageWidth)
                
//                .scaledToFill()
                .clipShape(.circle)
                .overlay(Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 8)
                .scaledToFit()
                .offset(x:0, y: -imageWidth/2)
                .padding(.bottom, -imageWidth/2)
            
            VStack(alignment: .leading, spacing: 8) {
                HStack {
                    Text(landmark.name).font(.title)
                    Button {
                            self.userData.landmarks[self.landmarkIndex].isFevorite.toggle()
                        
                        
                    } label: {
                        
                        if self.userData.landmarks[self.landmarkIndex].isFevorite {
                            Image(systemName: "star.fill").foregroundColor(.yellow)
                        }else{
                            Image(systemName: "star").foregroundColor(.gray)
                        }
                        
                    }

                }
                
                HStack {
                    Text(landmark.city).font(.subheadline)
                    Spacer()
                    Text(landmark.province).font(.subheadline)
                }
            }
            .padding()
            Spacer()
        }
        .navigationBarTitle(Text(landmark.name), displayMode: .inline)

    }
}

#Preview {
    NavigationView {
        CNLandmarkDetail(landmark: CN_landmarks[2])
    }
    
}


